<template>
    <div class="app-container-echart" style="height: 389px;">
        <div class="chart" style="height:300px;width:100%;" />
    </div>
</template>
  
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') 
import resize from '@/views/dashboard/components/mixins/resize'
  
  
  export default {
    mixins: [resize],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          // this.initChart();
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      getGradientColor(color11, color22){
        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {offset: 0, color: color11},
          {offset: 1, color: color22}]) ;
      },
      initChart() {
          this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(['这是试题AAAAAAAAAAAAAAAAAAAAAA',
                        '这是试题BBBBBBBBBBBBBBBBBBBBBBBB',
                        '这是试题CCCCCCCCCCC',
                        '这是试题DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD',
                        '这是试题EEEEEEEEEEEEEEEEEEEEEEEEE',
                        '这是试题FFFFFFFFFFFFFFFFFFFFFFFFFFFF'],
                [123, 91, 87, 81, 69, 67])
      },
      setOptions(times, datas) {
        this.chart.setOption({
            title: {
                text: '错题排行榜TOPN(次数)',
                left:'center'
            },
            grid: {
                top: '8%',
                left: '0%',
                right: '0%',
                bottom: '0%'
            },
            tooltip: {
                show: true,
                backgroundColor: '#fff',
                textStyle: {
                    fontSize: 12,
                    color: '#152934',
                    lineHeight: 50
                },
            },
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                data: times,
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                  show: true,
                  inside: true,
                  textStyle: {
                    verticalAlign: "bottom",
                    align: "left",
                    padding: [0, 0, 15, -5],
                  },
                },
            },
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                data: datas,
                barWidth: 25,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: 'black',
                                fontSize: 16
                            }
                        },
                        color: function (params) {
                            var myColor = ['#43CFB4', '#2DB4F8', '#2D78D5', '#7C6BD3', '#E4A824', '#F27B39'];
                            var num = myColor.length
                            return myColor[params.dataIndex % num]
                        }
                    }
                }
            }]
        })
      }
    }
  }
  </script>
  